<template>
  <div>
    <BaseInfo :baseInfo="baseInfo"></BaseInfo>
    <Record :data="repaymentList"></Record>
    <section class="mt20">
      <nav class="common-nav mb20">
        <h2 style="width: 136px" class="common-nav__title tab_active">关联订单</h2>
        <p class="detail-block__btn" @click="downloadFile">下载</p>
      </nav>
      <BaseTable :columns="columns" v-bind="table">
        <template slot="paymentStatus" slot-scope="scope">
          <span class="mr5">{{ ORDER_STATUS[scope.row.paymentStatus] }}</span>
          <el-tooltip
            v-if="scope.row.paymentStatus"
            class="item"
            effect="dark"
            :content="ORDER_STATUS[scope.row.paymentStatus]"
            placement="top"
          >
            <i class="el-icon-question"></i>
          </el-tooltip>
        </template>
      </BaseTable>
    </section>
  </div>
</template>

<script>
import BaseInfo from './components/BaseInfo.vue'
import Record from './components/Record.vue'
import BaseTable from '@/components/BaseTable/index.vue'
import { FormTableMixin } from '@/mixins/form-table'
import http from '@/utils/request'
import { ORDER_STATUS } from '@/constants/auditModel'

async function service(params) {
  const { records, total } = await http.get('/orders', {
    params: { ...params, queryType: 2, queryId: this.$route.query.drawdownId },
  })

  return {
    data: records,
    total: total,
  }
}

export default {
  name: 'disburseRecordDetail',
  components: {
    BaseInfo,
    Record,
    BaseTable,
  },
  mixins: [FormTableMixin(service)],
  data() {
    return {
      baseInfo: {},
      repaymentList: [],
      ORDER_STATUS,
      columns: [
        { label: '订单日期', prop: 'createdAt' },
        { label: '订单编号', prop: 'purOrderNumber' },
        { label: '供应商', prop: 'customerName' },
        { label: '采购商', prop: 'companyName' },
        {
          label: '状态',
          prop: 'paymentStatus',
        },
        { label: '订单金额', prop: 'salesTotalAmount' },
      ],
    }
  },
  methods: {
    async downloadFile() {
      const { data, headers } = await this.$http.get(`/orders/export`, {
        params: {
          queryType: 2,
          queryId: this.$route.query.drawdownId,
        },
        responseType: 'blob',
      })

      if (data) {
        let length = headers['content-disposition'].length
        let fileName = decodeURI(
          headers['content-disposition'].substr(headers['content-disposition'].lastIndexOf("'") + 1, length)
        )
        let blob = new Blob([data], {
          type: 'application/vnd.ms-excel',
        })
        let downloadElement = document.createElement('a')
        let href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        downloadElement.download = `${fileName}`
        document.body.appendChild(downloadElement)
        downloadElement.click()
        document.body.removeChild(downloadElement)
        window.URL.revokeObjectURL(href)
      }
    },
    async getDetailRequest() {
      const res = await this.$http.get(`/drawdowns/records/${this.$route.query.drawdownId}`)
      this.baseInfo = {
        tenantName: res.tenantName,
        uscCode: res.uscCode,
        amount: res.amount,
        notRepayAmount: res.notRepayAmount,
        createDate: res.createDate,
        drawdownNo: res.drawdownNo,
        appName: res.appName,
        productName: res.productName,
        fundName: res.fundName,
        lastDueRepayDate: res.lastDueRepayDate,
        status: res.statusStr,
        interestRate: res.interestRate,
        thirdNo: res.thirdNo,
        drawdownDate: res.drawdownDate,
      }
      this.repaymentList = res.repaymentList
    },
  },
  mounted() {
    this.getDetailRequest()
  },
}
</script>

<style lang="scss" scoped>
.common-nav {
  justify-content: space-between;
}
.detail {
  &-block {
    &__btn {
      cursor: pointer;
      text-align: center;
      border-radius: 1px;
      position: relative;
      top: -5px;
      color: $white;
      height: 32px;
      width: 100px;
      line-height: 32px;
      background: $blue;
    }
  }
}
</style>
